<!DOCTYPE html>
<html lang=en>
<meta charset=utf-8>
<style>
.block {
  background: #88E;
  border: solid navy;
  float: left;
  padding: 4px;
  line-height: 1.3;
  font-size: 20px;
 }
.line {
  border: solid orange;
  background: #FD8;
  overflow: hidden;
}
.line:not(:first-child) {
  border-top: none;
}
 .root-inline {
   border: 1px solid;
   background: #DDF8;
   border-color: blue;
 }
 .inline {
   border: solid 2px;
   background: #FDF8;
   border-color: fuchsia;
}
.start, .root-inline:not(.start):not(.end) {
  border-right: dotted 1px silver;
}
.end, .root-inline:not(.start):not(.end) {
  border-left: dotted 1px silver;
}
.float {
  float: left;
  height: 2em;
  padding: 1em;
  background: #8888;
  border: solid navy;
}
.big {
  font-size: 2em;
}
</style>

<body>

<div class="block">
    <div class="line"><span class="root-inline start">
      Paragraph text ...  <span class="inline start">Line-split Inline</span>
    </span></div>
    <div class="line"><span class="root-inline">
      <span class="inline end">Element</span> ... ... ... ... ... ... ... ... ...
    </span></div>
    <div class="line"><span class="root-inline">
      ... ... ... ... <span class="inline big">Big Text</span> ... ... ...
    </span></div>
    <div class='float'>Float</div>
    <div class="line"><span class="root-inline">
      ... ... ... ... ... ... ... ...
    </span></div>
    <div class="line"><span class="root-inline">
      ... ... ... ... ... ... ... ... ...
    </span></div>
    <div class="line"><span class="root-inline end">
      ... ... ... ... ...
    </span></div>
  </span>
</div>
